<template>
  <div class="submitSuccess_wrap">
    <div class="icon">
      <span class="iconfont icon-chenggong"></span>
    </div>
    <h3>Order submitted successfully</h3>
    <div class="time_warn">
      Please be in
      <span class="time">{{count}}</span>
      Payment within minutes
    </div>
    <p class="warn_txt">Cancellation will be cancelled after timeout</p>
    <div class="txt_wrap">
      <p class="notice">
        <span class="notice_left">When you pay, please fill in the order number in the remarks</span>
        <router-link tag="span" to="help" class="look">view help</router-link>
      </p>
      <div class="copy">
        <span>Order number</span>
        <div class="number">
          <span>{{link}}</span>
          <div class="btn_copy" :data-clipboard-text="link" @click="copy">copy</div>
        </div>
      </div>
    </div>
    <ul class="info_box">
      <li>
        <span class="info_left">Amount of payment</span>
        <div class="info_right">
          <span class="price_info">{{jin}}</span>
        </div>
      </li>
      <li v-if="type === 1">
        <span class="info_left">Alipay</span>
        <span class="info_right">{{alipay}}</span>
      </li>
      <li v-else-if="type === 2">
        <span class="info_left">WeChat</span>
        <span class="info_right">{{wxin}}</span>
      </li>
      <li v-else>
        <span class="info_left">{{bankName}}</span>
        <span class="info_right">{{openBank}} {{bank}}</span>
      </li>
      <li>
        <span class="info_left">Transaction voucher</span>
        <div class="upload_box">
          <span>{{imgUrl}}</span>
          <input type="file" id="sonvoucher" name="voucher" accept="image/*" @change="selectBuyImg">
          <label for="sonvoucher" class="upload">{{imgUrl ? 'Uploaded' : 'upload'}}</label>
        </div>
      </li>
    </ul>
    <div class="btn_wrap">
      <div class="public_btn" @click="submitVou">Presentation of transaction voucher</div>
      <p class="order_detail" @click="goDetail">View order details</p>
    </div>
  </div>
</template>

<script>
import Clipboard from 'clipboard';
export default {
  name: 'submitSuccess',
  data () {
    return {
      count: '', // Count down
      countTime: '',
      link: '',
      money: '',
      price: '',
      jin: '',
      alipay: '',
      wxin: '',
      bankName: '',
      openBank: '',
      bank: '',
      type: Number(this.$route.query.type) || 0,
      id: Number(this.$route.query.id) || 0,
      file: '',
      imgUrl: '',
      fileUrl: ''
    };
  },
  methods: {
    // Count down
    counTime () {
      this.timer = setInterval(() => {
        if (this.countTime > 0) {
          this.countTime--;
          let h = parseInt(this.countTime / 60 / 60 % 24);
          if (h < 10) h = '0' + h;
          let m = parseInt(this.countTime / 60 % 60);
          if (m < 10) m = '0' + m;
          let s = parseInt(this.countTime % 60);
          if (s < 10) s = '0' + s;
          this.count = h + ':' + m + ':' + s;
        } else {
          this.count = '00' + ':' + '00' + ':' + '00';
          clearInterval(this.timer);
          this.Toast('Order timeout has expired.');
          this.$router.replace('/myOrder/buyOrder?navIndex=3');
        }
      }, 1000);
    },
    // copy
    copy () {
      this.Toast(['Order number has been copied.', 'If not copied successfully,Please manually copy long press.']);
    },
    // upload
    selectBuyImg (e) {
      this.file = e.target.files[0];
      if (this.file.size >= 3145728) {
        this.Toast('Upload pictures too large');
        this.file = '';
        return false;
      } else {
        this.imgUrl = this.file.name;
      }
    },
    // Presentation of transaction voucher
    uploadVoucher () {
      this.axios.post('index/present/presenthall/voucher', {
        address: this.fileUrl,
        ids: this.id
      }).then(({data}) => {
        if (data.status === 200) {
          this.Toast('I am jumping to my order....');
          setTimeout(() => {
            this.$router.replace({path: 'myOrder/buyOrder?navIndex=1'});
          }, 800);
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Presentation of transaction voucher
    submitVou () {
      if (this.imgUrl) {
        this.getImgUrl();
      } else {
        this.Toast('Please upload trade voucher.');
      }
    },
    // Obtaining voucherURL
    getImgUrl: function () {
      let fm = new window.FormData();
      fm.append('address', this.file);
      this.axios.post('index/auth/pic_trunsfer', fm, {headers: {'Content-Type': 'multipart/form-data'}, transformRequest: [function (data) { return data; }]})
        .then(({data}) => {
          if (data.status === 200) {
            this.fileUrl = data.address;
            this.uploadVoucher();
          } else {
            this.Toast(data.message);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // View order details
    goDetail () {
      this.$router.replace({path: 'myOrder/buyOrder?navIndex=1'});
    },
    // Order interface
    getInfo () {
      this.axios.post('index/present/presenthall/sell_purchase_up', {
        ids: this.id
      }).then(({data}) => {
        if (data.status === 200) {
          this.countTime = data.time;
          this.counTime(); // Count down
          this.link = data.number;
          this.jin = data.jin;
          if (this.type === 1) {
            this.alipay = data.zhifu; // Alipay
          } else if (this.type === 2) {
            this.wxin = data.zhifu; // WeChat
          } else {
            this.bankName = data.zhifu.bank_name; // Bank card
            this.openBank = data.zhifu.bank_title;
            this.bank = data.zhifu.bank_number;
          };
        } else {
          this.Toast(data.message);
        }
      });
    }
  },
  mounted () {
    this.copyBtn = new Clipboard('.btn_copy');
    this.getInfo();
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/public.scss';
  .submitSuccess_wrap{
    padding-bottom: 90px;
    background: #f4f5f7;
    text-align: center;
    .icon {
      width: 100%;
      height: 197px;
      text-align: center;
      padding-top: 60px;
      background: #fff;
      .icon-chenggong {
        font-size: 127px;
        color: #2dcb73;
      }
    }
    h3 {
      font-weight: bold;
      font-size: 36px;
      color: #222222;
      height: 147px;
      line-height: 147px;
      text-align: center;
      background: #fff;
    }
    .time_warn {
      font-size: 28px;
      color: #666;
      line-height: 47px;
      padding-bottom: 10px;
      background: #fff;
      .time {
        font-size: 28px;
        color: #fb555b;
        font-weight: bold;
      }
    }
    .warn_txt {
      font-size: 28px;
      color: #666;
      background: #fff;
    }
    .txt_wrap {
      padding: 0 30px;
      padding-top: 47px;
      background: #fff;
      margin-bottom: 20px;
      .notice {
        height: 88px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28px;
        border-bottom: 1Px solid #e5e5e5;
        .notice_left {
          display: block;
          width: 70%;
          text-align: left;
          color: #807cb3;
        }
        .look {
          color: #ffa521;
          font-size: 26px;
        }
      }
      .copy {
        height: 106px;
        line-height: 106px;
        font-size: 28px;
        color: #282828;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .number {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          span {
            padding-right: 30px;
          }
          .btn_copy {
            width: 140px;
            height: 56px;
            line-height: 56px;
            text-align: center;
            color: #ff9e27;
            border: 1Px solid #ff9e27;
            border-radius: 10px;
            font-size: 26px;
          }
        }
      }
    }
    .info_box {
      padding: 0 30px;
      background: #fff;
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1Px solid #e5e5e5;
        font-size: 28px;
        color: #282828;
        height: 106px;
        .info_left {
          text-align: left;
        }
        &:last-child {
          border-bottom: none;
        }
        .upload_box {
          width: 80%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          position: relative;
          overflow: hidden;
         span {
            position: absolute;
            display: block;
            width: 70%;
            height: 56px;
            top: 0;
            left: 0;
            overflow-x: auto;
            white-space: nowrap;
            line-height: 56px;
          }
          input#sonvoucher{
            position: fixed;
            top: -10000px;
            left: 10000px;
            opacity: 0;
            z-index: -1;
            width: 140px;
            height: 56px;
          }
          .upload {
            display: block;
            width: 140px;
            height: 56px;
            line-height: 56px;
            text-align: center;
            color: #ff9e27;
            border: 1Px solid #ff9e27;
            border-radius: 10px;
            font-size: 26px;
          }
        }
      }
    }
    .btn_wrap {
      text-align: center;
      .public_btn {
        box-shadow: 0px 0px 10px 10px #f6ebd2;
        margin: 44px 0;
      }
      .order_detail {
        font-size: 30px;
        color: #999999;
      }
    }
  }
</style>
